<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive } from 'vue';

  // #region table
  // 列定义
  const columns = [
    { title: '测点ID', dataIndex: 'id', key: 'id', width: 90, align: 'center' },
    { title: '测点名称', dataIndex: 'loop', key: 'loop', align: 'center' },
    { title: '区域', dataIndex: 'area', key: 'area', align: 'center' },
    { title: '监测站', dataIndex: 'room', key: 'room', align: 'center' },
    {
      title: '组织单元',
      dataIndex: 'unit',
      key: 'unit',
      width: 100,
      align: 'center',
    },
  ];

  const tableData = ref([
    {
      id: '001',
      loop: '回路：1#低压总进线',
      area: '北区',
      room: '配电室A',
      unit: '生产部',
    },
    {
      id: '002',
      loop: '回路：2#变压器输出',
      area: '南区',
      room: '配电室B',
      unit: '管理部',
    },
  ]);

  const add = () => {
    open.value = true;
  };

  // #endregion table

  // #region modal

  const open = ref<boolean>(false);
  const handleOk = () => {
    open.value = false;
  };
  const labelCol = { style: { width: '100px' } };
  const wrapperCol = { span: 14 };

  const formState = reactive({
    id: '',
    loop: '',
    area: '',
    room: '',
    unit: '',
  });
  // #endregion modal

  // #region form
  const formData = reactive({
    id: '',
    type: '',
    protocol: '',
    frequency: '',
  });
  // #endregion form
</script>

<template>
  <div class="container">
    <div class="table-content">
      <a-card title="已配置的监测点列表">
        <div class="buttons">
          <a-button type="primary" size="small" :icon="h(PlusOutlined)" @click="add">新增监测点</a-button>
          <a-button type="primary" danger size="small" :icon="h(MinusOutlined)">删除监测点</a-button>
        </div>
        <a-table :columns="columns" :data-source="tableData" rowKey="id">
          <!-- <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'link'">
                <a> 链接 </a>
                <a>下载</a>
              </template>
            </template> -->
        </a-table>
      </a-card>
    </div>

    <div class="form-content">
      <a-card title="计量装置配置" class="measurement">
        <a-form :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="监测点ID"> <a-input v-model:value="formData.id" /> </a-form-item>

          <a-form-item label="计量装置类型">
            <a-select v-model:value="formData.type" @focus="focus" @change="handleChange">
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="传输协议">
            <a-select v-model:value="formData.protocol" @focus="focus" @change="handleChange">
              <a-select-option value="jack">Jack</a-select-option>
              <a-select-option value="lucy">Lucy</a-select-option>
            </a-select></a-form-item
          >

          <a-form-item label="数据传输频率"> <a-input v-model:value="formData.frequency" /></a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">确认</a-button>
            <a-button type="primary" html-type="submit">取消</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>

    <a-modal v-model:open="open" title="编辑监测点配置" @ok="handleOk">
      <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="测点ID"> <a-input v-model:value="formState.id" /> </a-form-item>

        <a-form-item label="测点名称"> <a-input v-model:value="formState.loop" /> </a-form-item>

        <a-form-item label="区域选择">
          <a-select v-model:value="formState.area" @focus="focus" @change="handleChange">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="监测站选择">
          <a-select v-model:value="formState.room" @focus="focus" @change="handleChange">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select></a-form-item
        >

        <a-form-item label="组织单元选择">
          <a-select v-model:value="formState.unit" @focus="focus" @change="handleChange">
            <a-select-option value="jack">Jack</a-select-option>
            <a-select-option value="lucy">Lucy</a-select-option>
          </a-select></a-form-item
        >
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
  .container {
    display: flex;
  }
  .table-content {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0 5px;
  }

  .form-content {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0 5px;
  }

  button {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .ant-card {
    min-height: 1000px;
  }
</style>
